<template>
  <div id="account">
    <!-- 账号管理 -->
    <div class="manage">
      <!-- 用户信息 -->
      <div class="userInfo">
        <!-- 用户头像、信息名称 -->

        <div class="userData">
          <!-- 头像 -->
          <div class="userIcon">
            <img src alt />
          </div>
          <div class="userName">
            <p>12345678，欢迎您！</p>

            <div class="balance_prompt">
              <span>账户余额250.00元</span>
              <span @click="allcash">立即提现</span>
            </div>
          </div>
        </div>
        <!-- 退出登录 -->
        <span>退出登录</span>
      </div>
      <!-- 基本信息 -->
      <div class="basicInfo">
        <!-- 标题 -->
        <div class="basicInfo-title">
          <p>基本信息</p>
          <!-- 修改密码、手机号。。。。 -->
          <ul class="update">
            <li v-for="(msg, num) in updateList" :key="num" @click="modalBoxShow(num)">
              <el-link type="danger">{{ msg }}</el-link>
            </li>
          </ul>
        </div>
        <!-- 信息 -->
        <div class="basicInfo-data">
          <!-- 昵称、手机、邮箱、微信号 -->
          <div class="data_Message">
            <span>昵称：文鸯</span>
            <span>手机号：13999999999</span>
            <span>邮箱：13999999999@136.com</span>
            <span>微信号：pijiuhongjiuputaojiu</span>
          </div>
          <!-- 个人介绍 -->
          <div class="introduce">
            <span style="display:inline-block;min-width:75px;max-width:75px;">个人介绍：</span>
            <span>圣诞节埃里克森大家安利卡时间段拉结尔巧克力吉尔卡欢快的姐夫哈就开始电话费可乐喝圣诞圣诞节埃里克森大家安利卡时间段拉结尔巧克力吉尔卡欢快的姐夫哈就开始电话费可乐喝圣诞</span>
          </div>
        </div>
      </div>
      <!-- 收货地址 -->
      <div class="shippingAddress">
        <!-- 标题 -->
        <div class="shippingAddress-title">
          <p>收货地址</p>
        </div>
        <!-- 地址 -->
        <div class="shippingAddress-site">
          <div class="siteInfo">
            <!-- 默认Icon -->
            <span class="default">默认</span>
            <p>
              江苏省南京市雨花台区软件大道112号XXXX小区802栋302室(王狗蛋 收)
              18213124546
            </p>

            <!-- 小羽毛图标 -->
            <span class="compileIcon" @click="harvestShow = true">
              <img src="../../assets/image/7_1_1_bianji.png" alt />
            </span>
          </div>
          <div class="siteInfo">
            <p>
              江苏省南京市雨花台区软件大道112号XXXX小区802栋302室(王狗蛋 收)
              18213124546
            </p>
            <!-- 小羽毛图标 -->
            <span class="compileIcon" @click="harvestShow = true">
              <img src="../../assets/image/7_1_1_bianji.png" alt />
            </span>
          </div>
        </div>
        <!-- 新增收货地址 -->
        <div class="shippingAddress-add" @click="increaseShow = true">
          <p>+新增收货地址</p>
        </div>
      </div>
      <!-- 发票信息 -->
      <div class="invoice">
        <!-- 标题 -->
        <div class="invoice-title">
          <p>发票信息</p>
        </div>
        <!-- 信息 -->
        <div class="invoice-info">
          <div class="siteInfo">
            <!-- 默认Icon -->
            <span class="default">默认</span>
            <p>普通发票(个人) 发票抬头：王狗蛋</p>
            <!-- 小羽毛图标 -->
            <!-- 编辑发票信息 -->
            <span class="compileIcon">
              <img src="../../assets/image/7_1_1_bianji.png" alt @click="invoiceShow1" />
            </span>
          </div>
        </div>
        <!-- 新增发票信息 -->
        <div class="invoice-add" @click="invoiceShow">
          <p>+新增发票信息</p>
        </div>
      </div>
    </div>
    <!-- 修改密码模态框 -->
    <div class="update_password" v-show="flag">
      <!-- 中间白色修改框 -->
      <div class="amendBox">
        <!-- 标题 -->
        <div class="amend-title">
          <p>修改密码</p>
        </div>
        <!-- 密码输入框 -->
        <div class="passwordInput">
          <ul class="inputList">
            <li>
              <span>*旧密码:</span>
              <el-input placeholder="请输入旧密码" v-model="oldPsd" show-password class="psd"></el-input>
            </li>
            <li>
              <span>*新密码:</span>
              <el-input placeholder="请输入新密码" v-model="newPsd" show-password class="psd"></el-input>
            </li>
            <li>
              <span>*再次输入新密码:</span>
              <el-input placeholder="请输入新密码" v-model="repetitionNewPsd" show-password class="psd"></el-input>
            </li>
          </ul>
        </div>
        <!-- 确定取消按键 -->
        <div class="confirmBtn">
          <span
            style="border-right:1px solid #ccc;display:flex;justify-content:center"
            @click="flag = false"
          >取消</span>
          <span style="color:#f03a58;display:flex;justify-content:center" @click="successShow1">确定</span>
        </div>
      </div>
    </div>
    <!-- 修改密码成功模态框 -->
    <div class="successfullyPsd" v-show="successfullyPsd">
      <!-- 修改成功小图标 -->
      <div class="successIcon">
        <img src="../../assets/image/1_1_2_icon_success.png" alt />
      </div>
      <span>密码修改成功！</span>
    </div>
    <!-- 修改手机号码模态框 -->
    <div class="update_phone" v-show="phoneShow">
      <!-- 中间白色修改框 -->
      <div class="amendBox">
        <!-- 标题 -->
        <div class="amend-title">
          <p>修改手机号</p>
        </div>
        <!-- 手机号码输入框 -->
        <div class="phoneInput">
          <ul class="inputList">
            <li>
              <span>*新手机号码:</span>
              <el-input
                placeholder="请输入新手机号码"
                v-model="newphone"
                type="text"
                class="psd"
                maxlength="11"
                clearable
                show-word-limit
                oninput="value=value.replace(/[^\d]/g,'')"
              ></el-input>
            </li>
            <li>
              <span>*验证码:</span>
              <el-input
                placeholder="请输入验证码"
                v-model="verificationCode"
                type="text"
                class="psd"
                maxlength="4"
                clearable
                show-word-limit
                oninput="value=value.replace(/[^\d]/g,'')"
              ></el-input>
              <el-button
                type="danger"
                round
                size="mini"
                native-type="button"
                style="margin-left:30px;"
              >获取验证码</el-button>
            </li>
          </ul>
        </div>
        <!-- 确定取消按键 -->
        <div class="confirmBtn">
          <span
            style="border-right:1px solid #ccc;display:flex;justify-content:center"
            @click="phoneShow = false"
          >取消</span>
          <span style="color:#f03a58;display:flex;justify-content:center" @click="successShow2">确定</span>
        </div>
      </div>
    </div>
    <!-- 修改手机号码成功模态框 -->
    <div class="successfullyPhone" v-show="successfullyPhone">
      <!-- 修改成功小图标 -->
      <div class="successIcon">
        <img src="../../assets/image/1_1_2_icon_success.png" alt />
      </div>
      <span>手机号码修改成功！</span>
    </div>
    <!-- 编辑信息模态框 -->
    <div class="update_message" v-show="messageShow">
      <!-- 中间白色修改框 -->
      <div class="amendBox">
        <!-- 标题 -->
        <div class="amend-title">
          <p>编辑个人信息</p>
        </div>
        <!-- 编辑个人信息输入框 -->
        <div class="messageInput">
          <ul class="inputList">
            <li>
              <span>*昵称:</span>
              <el-input placeholder="请输入昵称" v-model="newName" class="psd" clearable></el-input>
            </li>
            <li>
              <span>*邮箱:</span>
              <el-input
                placeholder="请输入邮箱"
                v-model="newEmail"
                class="psd"
                type="email"
                clearable
                onkeyup="value=value.replace(/[\u4e00-\u9fa5]/ig,'')"
              ></el-input>
            </li>
            <li>
              <span>*微信号:</span>
              <el-input
                placeholder="请输入微信号"
                v-model="newWeChat"
                class="psd"
                clearable
                onkeyup="value=value.replace(/[\u4e00-\u9fa5]/ig,'')"
              ></el-input>
            </li>
            <li>
              <span>*个人简介:</span>
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入个人简介"
                v-model="individualResume"
                class="psd"
                maxlength="200"
                clearable
              ></el-input>
            </li>
          </ul>
        </div>
        <!-- 确定取消按键 -->
        <div class="confirmBtn">
          <span
            style="border-right:1px solid #ccc;display:flex;justify-content:center"
            @click="messageShow = false"
          >取消</span>
          <span style="color:#f03a58;display:flex;justify-content:center" @click="successShow3">确定</span>
        </div>
      </div>
    </div>
    <!-- 个人信息编辑成功模态框 -->
    <div class="successfullyMessage" v-show="successfullyMessage">
      <!-- 修改成功小图标 -->
      <div class="successIcon">
        <img src="../../assets/image/1_1_2_icon_success.png" alt />
      </div>
      <span>个人信息编辑成功！</span>
    </div>
    <!-- 编辑收货地址模态框 -->
    <div class="receiverAddress" v-show="harvestShow">
      <!-- 中间白色修改框 -->
      <div class="amendBox">
        <!-- 标题 -->
        <div class="amend-title">
          <p>编辑收货地址</p>
        </div>
        <!-- 编辑收货信息输入框 -->
        <div class="addresseeInput">
          <ul class="inputList">
            <li>
              <span>*收货人:</span>
              <el-input placeholder="请输入收件人姓名" v-model="consignee" class="psd" clearable></el-input>
            </li>
            <li>
              <span>*手机号:</span>
              <el-input
                placeholder="请输入收件人手机号"
                v-model="myPhone"
                class="psd"
                type="text"
                clearable
                oninput="value=value.replace(/[^\d]/g,'')"
              ></el-input>
            </li>
            <li>
              <span>*所在地区:</span>
              <div class="region">
                <el-select placeholder="请选择省份" style="width:120px">
                  <el-option value="南京"></el-option>
                </el-select>
                <el-select placeholder="请选择城市" style="width:120px">
                  <el-option value="江宁"></el-option>
                </el-select>
                <el-select placeholder="请选择区域" style="width:120px">
                  <el-option value="黑角角"></el-option>
                </el-select>
              </div>
            </li>
            <li>
              <span>*详细地址:</span>
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入详细地址"
                rows:string="3"
                v-model="location"
                class="psd"
                maxlength="200"
                clearable
              ></el-input>
            </li>
          </ul>
        </div>
        <!-- 对地址的操作 -->
        <div class="operation">
          <span style="color:#FE5E72;display:flex;">
            <span class="setIcon">
              <img src="../../assets/image/3_1_0_select_s.png" alt />
            </span>
            设置为默认地址
          </span>
          <span style="color:#FF7413">删除此地址</span>
        </div>
        <!-- 确定取消按键 -->
        <div class="confirmBtn">
          <span
            style="border-right:1px solid #ccc;display:flex;justify-content:center"
            @click="harvestShow = false"
          >取消</span>
          <span style="color:#f03a58;display:flex;justify-content:center" @click="successShow4">确定</span>
        </div>
      </div>
    </div>
    <!-- 收货地址编辑成功模态框 -->
    <div class="successfullyHarvest" v-show="successfullyHarvest">
      <!-- 修改成功小图标 -->
      <div class="successIcon">
        <img src="../../assets/image/1_1_2_icon_success.png" alt />
      </div>
      <span>收货地址编辑成功！</span>
    </div>
    <!-- 新增收货地址模态框 -->
    <div class="increaseSite" v-show="increaseShow">
      <!-- 中间修改白色模态框 -->
      <div class="amendBox">
        <!-- 标题 -->
        <div class="amend-title">
          <p>新增收货地址</p>
        </div>
        <!-- 编辑收货信息输入框 -->
        <div class="compile">
          <ul class="inputList">
            <li>
              <span>*收货人:</span>
              <el-input placeholder="请输入收件人姓名" v-model="consignee2" class="psd" clearable></el-input>
            </li>
            <li>
              <span>*手机号:</span>
              <el-input
                placeholder="请输入收件人手机号"
                v-model="myPhone2"
                class="psd"
                type="text"
                clearable
                oninput="value=value.replace(/[^\d]/g,'')"
              ></el-input>
            </li>
            <li>
              <span>*所在地区:</span>
              <div class="region">
                <el-select placeholder="请选择省份" style="width:120px">
                  <el-option value="南京"></el-option>
                </el-select>
                <el-select placeholder="请选择城市" style="width:120px">
                  <el-option value="江宁"></el-option>
                </el-select>
                <el-select placeholder="请选择区域" style="width:120px">
                  <el-option value="黑角角"></el-option>
                </el-select>
              </div>
            </li>
            <li>
              <span>*详细地址:</span>
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入详细地址"
                v-model="location2"
                class="psd"
                maxlength="200"
                clearable
              ></el-input>
            </li>
          </ul>
        </div>
        <!-- 对地址的操作 -->
        <div class="operation">
          <span style="color:#999999;display:flex;">
            <span class="setIcon">
              <img src="../../assets/image/7_1_1_duihao1.png" alt />
            </span>
            设置为默认地址
          </span>
        </div>
        <!-- 确定取消按键 -->
        <div class="confirmBtn">
          <span
            style="border-right:1px solid #ccc;display:flex;justify-content:center"
            @click="increaseShow = false"
          >取消</span>
          <span style="color:#f03a58;display:flex;justify-content:center" @click="successShow5">确定</span>
        </div>
      </div>
    </div>
    <!-- 新增收货地址编辑成功模态框 -->
    <div class="successfullyIncrease" v-show="successfullyIncrease">
      <!-- 修改成功小图标 -->
      <div class="successIcon">
        <img src="../../assets/image/1_1_2_icon_success.png" alt />
      </div>
      <span>新增收货地址成功！</span>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
import Vue from "vue";
// import invoice from "./invoice.vue";
export default Vue.extend({
  name: "account",
  components: {
    // invoice
  },
  data() {
    return {
      updateList: ["修改密码", "|", "修改手机号", "|", "编辑信息"], //修改密码、手机号码、编辑
      flag: false, //修改密码模态框显示
      oldPsd: "", //旧密码
      newPsd: "", //新密码
      repetitionNewPsd: "", //重复输入新密码
      successfullyPsd: false, //修改密码成功模态框显示
      phoneShow: false, //修改手机号码模态框显示
      newphone: "", //新手机号码
      verificationCode: "", //验证码
      successfullyPhone: false, //修改手机号码成功模态框显示
      newName: "", //昵称
      newEmail: "", //邮箱
      newWeChat: "", //微信号
      individualResume: "", //个人简介内容
      messageShow: false, //编辑信息模态框显示
      successfullyMessage: false, //个人信息编辑成功模态框显示
      consignee: "", //收件人
      location: "", //详细地址
      myPhone: "", //收件人手机号
      harvestShow: false, //编辑收货地址模态框显示
      successfullyHarvest: false, //收货地址编辑成功模态框
      consignee2: "", //新增收货人
      myPhone2: "", //新增收货人手机号
      location2: "", //新增详情地址
      increaseShow: false, //新增收货地址模态框显示
      successfullyIncrease: false //新增收货地址编辑成功模态框
    };
  },
  methods: {
    // 点击修改密码、修改手机号码、编辑信息模态框出现
    modalBoxShow(i) {
      if (i == 0) {
        this.flag = true;
      } else if (i == 2) {
        this.phoneShow = true;
      } else if (i == 4) {
        this.messageShow = true;
      }
    },
    // 点击修改密码模态框中的确定按钮，修改成功显示
    successShow1() {
      this.successfullyPsd = true;
      this.flag = false;
      setTimeout(() => {
        this.successfullyPsd = false;
      }, 2000);
    },
    // 点击修改手机号码模态框中的确定按钮，修改成功显示
    successShow2() {
      this.successfullyPhone = true;
      this.phoneShow = false;
      setTimeout(() => {
        this.successfullyPhone = false;
      }, 2000);
    },
    // 点击编辑信息模态框中的确定按钮，修改成功显示
    successShow3() {
      this.successfullyMessage = true;
      this.messageShow = false;
      setTimeout(() => {
        this.successfullyMessage = false;
      }, 2000);
    },
    //点击编辑收货模态框中的确定按钮，修改成功显示
    successShow4() {
      this.successfullyHarvest = true;
      this.harvestShow = false;
      setTimeout(() => {
        this.successfullyHarvest = false;
      }, 2000);
    },
    // 点击新增收货地址模态框中的确定按钮，修改成功显示
    successShow5() {
      this.successfullyIncrease = true;
      this.increaseShow = false;
      setTimeout(() => {
        this.successfullyIncrease = false;
      }, 2000);
    },
    invoiceShow() {
      this.$router.push({ path: "/personalCenter/manage/invoice" });
    },
    invoiceShow1() {
      this.$router.push({ path: "/personalCenter/manage/invoice_1" });
    },
    allcash() {
      this.$router.push({ path: "/personalCenter/allcash" });
    }
  }
});
</script>
<style lang="scss" scoped>
// 显示信息的白色内容盒
@mixin infoBox {
  margin-top: 20px;
  padding: 10px 15px 20px;
  background:rgba(255,255,255,1);
box-shadow:0px 3px 5px 0px rgba(204,196,196,0.15);

}
// 显示信息的白色内容盒标题
@mixin infoTitle {
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  height: 38px;
  line-height: 38px;
  font-size: 16px;
}
// 收货地址和发票信息的选项
@mixin optionMsg {
  font-size: 13px;
  text-align: start;
  .siteInfo {
    margin-top: 12px;
    display: flex;
    //  默认地址图标
    .default {
      display: inline-block;
      width: 30px;
      height: 16px;
      border: 1px solid #f03a58;
      border-radius: 30px;
      font-size: 12px;
      color: #f03a58;
      text-align: center;
      margin-right: 10px;
    }
    //小羽毛图标
    .compileIcon {
      display: inline-block;
      width: 15px;
      height: 15px;
      margin-left: 18px;
      cursor: pointer;
    }
  }
}
//新增信息按钮
@mixin addInfo {
  width: 85px;
  height: 25px;
  border: 1px solid #f03a58;
  border-radius: 8px;
  margin-top: 18px;
  color: #f03a58;
  font-size: 12px;
  line-height: 25px;
  cursor: pointer;
}
// 有关修改的模态框
@mixin updateInfo {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
}
// 中间修改白色模态框
@mixin centerBox {
  width: 465px;
  height: 277px;
  padding: 10px 10px 0 10px;
  background: #fff;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
// 中间修改白色模态框（扩大）
@mixin centerBox2 {
  width: 465px;
  height: 370px;
  padding: 10px 10px 0 10px;
  background: #fff;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
// 输入框内容盒
@mixin inputInfo {
  margin: 15px 0;
  .inputList {
    li {
      height: 40px;
      list-style: none;
      display: flex;
      font-size: 12px;
      text-align: start;
      line-height: 40px;
      margin-bottom: 15px;
      margin-left: -18px;
      span {
        // flex: 1;
        display: block;
        margin-left: -20px;
        width: 100px;
      }
      .psd {
        flex: 4;
      }
    }
  }
}
//确定、取消按键内容盒
@mixin confirmBtn {
  height: 45px;
  margin-top: 25px;
  border-top: 1px solid #ccc;
  display: flex;
  span {
    flex: 1;
    line-height: 45px;
    cursor: pointer;
  }
}
//账号管理
.manage {
  //用户信息
  .userInfo {
    height: 100px;
    background: white;
    display: flex;
    padding: 0 30px;
    box-sizing: border-box;
    justify-content: space-between;
    color: #f03a58;
    font-size: 14px;
    align-items: center;
    // 用户头像、信息名称
    .userData {
      display: flex;
      align-items: center;
      .userName {
        margin-top: -10px;
        p {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
        }
        .balance_prompt {
          & span:nth-of-type(1) {
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
          }
          & span:nth-of-type(2) {
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(240, 58, 88, 1);
            cursor: pointer;
          }
        }
      }

      .userIcon {
        width: 55px;
        height: 55px;
        margin: 22.5px 20px 22.5px 0;
        background: skyblue;
        border-radius: 50%;
        overflow: hidden;
      }
    }
  }
  //基本信息
  .basicInfo {
    @include infoBox;
    // 标题
    .basicInfo-title {
      @include infoTitle;
      // 修改密码、手机号。。
      // border: 1px solid red;
      display: flex;
      align-items: center;
      p {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 480;
        color: rgba(51, 51, 51, 1);
      }
      .update {
        list-style: none;
        display: flex;
        & a {
          font-size: 13px !important;
          color: #f03a58;
          margin: 0 5px;
          cursor: pointer;
        }
      }
    }
    // 信息
    .basicInfo-data {
      // 昵称、手机、邮箱、微信号
      .data_Message {
        display: flex;
        flex-wrap: wrap;
        text-align: start;
        font-size: 14px;
        margin-top: 10px;
        & span {
          width: 45%;
          margin: 8px 0;
          display: inline-block;
        }
      }
    }
    // 个人介绍
    .introduce {
      text-align: start;
      font-size: 14px;
      margin-top: 10px;
      letter-spacing: 1px;
      display: flex;
      line-height: 18px;
    }
  }
  // 收货地址
  .shippingAddress {
    @include infoBox;
    // 标题
    .shippingAddress-title {
      @include infoTitle;
      display: flex;
      align-items: center;
    }
    // 地址
    .shippingAddress-site {
      @include optionMsg();
      .siteInfo {
        display: flex;
        align-items: center;
      }
    }
    // 新增收货地址
    .shippingAddress-add {
      @include addInfo();
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  // 发票信息
  .invoice {
    @include infoBox;
    // 标题
    // display: flex;
    // align-items: center;
    .invoice-title {
      @include infoTitle();
      display: flex;
      align-items: center;
    }
    // 信息
    .invoice-info {
      @include optionMsg();
      .siteInfo {
        display: flex;
        align-items: center;
      }
    }
    // 新增收货地址
    .invoice-add {
      @include addInfo();
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
// 修改密码模态框
.update_password {
  @include updateInfo();
  // 中间白色修改框
  .amendBox {
    @include centerBox();
    // 标题
    .amend-title {
      @include infoTitle();
      display: flex;
      align-items: center;
    }
    // 密码输入框
    .passwordInput {
      @include inputInfo();
    }
    // 确定、取消按键
    .confirmBtn {
      @include confirmBtn();
    }
  }
}
// 修改密码成功模态框
.successfullyPsd,
.successfullyPhone,
.successfullyMessage,
.successfullyHarvest,
.successfullyIncrease {
  width: 180px;
  height: 100px;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 10px;
  color: #fff;
  letter-spacing: 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  // 修改成功小图标
  .successIcon {
    width: 30px;
    height: 30px;
    margin: 15px auto;
  }
}
// 修改手机号码模态框
.update_phone {
  @include updateInfo();
  // 中间白色修改框
  .amendBox {
    @include centerBox();
    // 标题
    .amend-title {
      @include infoTitle();
      display: flex;
      align-items: center;
    }
    // 手机号码输入框
    .phoneInput {
      @include inputInfo();
    }
    //  确定取消按键
    .confirmBtn {
      @include confirmBtn();
      margin-top: 82px;
    }
  }
}
// 编辑信息模态框
.update_message {
  @include updateInfo();
  //    中间白色修改框
  .amendBox {
    @include centerBox2();
    // 标题
    .amend-title {
      display: flex;
      align-items: center;
      @include infoTitle();
    }
    // 个人信息输入框
    .messageInput {
      @include inputInfo();
    }
    // 确定取消按键
    .confirmBtn {
      @include confirmBtn();
      margin-top: 65px;
    }
  }
}
// 编辑收货地址模态框
.receiverAddress {
  @include updateInfo();
  //中间白色修改框
  .amendBox {
    @include centerBox2();
    //   标题
    .amend-title {
      display: flex;
      align-items: center;
      @include infoTitle();
    }
    // 收货地址输入框
    .addresseeInput {
      @include inputInfo();
      //   选择地区多选框
      .region {
        width: 372px;
        display: flex;
        justify-content: space-between;
      }
    }
    // 对地址的操作
    .operation {
      width: 190px;
      height: 14px;
      font-size: 12px;
      position: absolute;
      bottom: 55px;
      right: 14px;
      display: flex;
      line-height: 14px;
      justify-content: space-between;
      span:hover {
        cursor: pointer;
      }
      .setIcon {
        display: flex;
        width: 12px;
        height: 12px;
        margin-right: 4px;
      }
    }
    // 确定取消按键
    .confirmBtn {
      @include confirmBtn();
      margin-top: 65px;
    }
  }
}
// 新增收货地址模态框
.increaseSite {
  @include updateInfo();
  // 中间修改白色模态框
  .amendBox {
    @include centerBox2();
    // 标题
    .amend-title {
      display: flex;
      align-items: center;
      @include infoTitle();
    }
    // 编辑收货信息输入框
    .compile {
      @include inputInfo();
      //   选择地区多选框
      .region {
        width: 372px;
        display: flex;
        justify-content: space-between;
      }
    }
    // 对地址的操作
    .operation {
      width: 100px;
      height: 14px;
      font-size: 12px;
      position: absolute;
      bottom: 55px;
      right: 14px;
      line-height: 14px;
      span:hover {
        cursor: pointer;
      }
      .setIcon {
        display: flex;
        width: 12px;
        height: 12px;
        margin-right: 4px;
      }
    }
    // 确定取消按键
    .confirmBtn {
      @include confirmBtn();
      margin-top: 65px;
    }
  }
}
img {
  width: 100%;
  height: 100%;
}
.userName {
  .balance_prompt {
    & span:nth-of-type(1) {
      margin-right: 20px;
    }
  }
}
</style>
